// -------------------index.html--------------------------
.banner_box{
  background: url(../img/slider-bg-1.jpg) ;
  .banner{
    text-align: center;
    border-bottom: 2px solid #b01ba5;
    .header-social{
      a{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: #fff;
        font-size: 12px;
        margin: 0 7px;
        transition: .3s;
      }
      a:hover{
        background-color: #b01ba5;
      }
      
    }
    h2{
      padding-top: 120px;
      font-size: 160px;
      color: #fff;
      font-weight: 500;
      line-height: 1;
      animation: all 0.5s ease 0.4s both;
    }
    p{
      animation: all 0.5s ease 0.5s both;
    }
    p1,p{
      font-size: 22px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
      margin-bottom: 70px;
    }
    .site-btn{
      width: 180px;
      height: 60px;
      font-style: italic;
      color: #081624;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      background-color: #fff;
      line-height: 60px;
      box-shadow: 9px 9px 0px 0px #a82cb3;
      margin-bottom: 200px;
      animation: all 0.5s ease 0.6s both;
    }

  }
}
@keyframes all {
  0%{
    transform: translateY(20px);
  }
  100%{
    transform: translateY(0);
  }
}
.intro-section {
  background: #0c062e;
  padding: 115px 0;
  .intro-text-box{
    .top-meta{
      color: #fff;
      font-size: 18px;
      margin-bottom: 20px;
      a{
        color: #b01ba5;
      }
    }
    h3{
      margin-bottom: 40px;
      max-width: 370px;
      font-size: 30px;
      color: #fff;
    }
    p{
      font-size: 16px;
      font-weight: 500;
      color: #68647d;
      margin-bottom: 35px;
    }
    .read-more{
      font-size: 15px;
      text-transform: uppercase;
      font-weight: 700;
      font-style: italic;
      color: #fff;
      img{
        margin-left: 13px;
      }
    }
  }
}
.blog-section{
  padding: 105px 0;
  background: linear-gradient(45deg, #501755 0%, #2d1854 100%);
  .bolg-title{
    margin-bottom: 25px;
    h2{
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      font-style: italic;
      text-transform: uppercase;
    }
  }
  .blog-filter{
    display: block;
       li{
        display: inline-block;
         a {
        display: block;
        color: #fff;
        padding: 16px 36px;
        font-size: 16px;
        font-weight: 700;
        background: #6f2b95;
        line-height: 1.1;
        margin-right: 7px;
        margin-bottom: 10px;
        transition: .5s;
       }
       a:hover{
        background: rgb(178, 48, 211);
       }
    } 
  }
  .blog-item{
    margin-top: 86px;
    .blog-img{
      float: left;
      margin-right: 30px;
      width: 362px;
    }
    .blog-text {
      overflow: hidden;
      .top-meta{
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 20px;
        color: #fff;
        a{
            color: #b01ba5;
        }
     } 
      h3{
        margin-bottom: 40px;
        max-width: 370px;
        font-size: 30px;
        color: #fff;
      }
      p{
        font-size: 15px;
        font-weight: 500;
        color: #68647d;
        line-height: 1.6;
        margin-bottom: 42px;
      }
      .read-more{
        font-size: 15px;
        text-transform: uppercase;
        font-weight: 700;
        font-style: italic;
        color: #fff;
        img{
          margin-left: 13px;
        }
      }
    }
   
  }
  .sidebar{
    padding-top: 17px;
    .sidebar-item{
      .widget-item{
        margin-bottom: 85px;
        h4{
          color: #fff;
          text-transform: uppercase;
          font-weight: 700;
          font-style: italic;
          padding-left: 38px;
          margin-bottom: 48px;
          font-size: 24px;
        }
        .trending-widget{
          .tw-item{
            margin-bottom: 38px;
              .tw-img{
              float: left;
              margin-right: 17px;
              overflow: hidden;
            }
            .tw-text{
              .top-meta{
                color: #68647d;
                font-size: 12px;
                font-weight: 500;
                margin-bottom: 7px;
                a{
                  color: #b01ba5;
                }
              }
                h5{
                  font-size: 18px;
                  color: #fff;
                  line-height: 1.5;
              }
            }
          
          }
          .tw-item:last-child{
            margin-bottom: 0;
          }
        }
        .categories-widget{
          background: #34164b;
          // 上 左右 下 边距
          padding: 55px 0px 25px;
          h4{
            color: #fff;
            text-transform: uppercase;
            font-weight: 700;
            font-style: italic;
            padding-left: 38px;
            margin-bottom: 48px;
            font-size: 24px;
          }
          ul{
            list-style: none;
            padding: 0 38px;
            li{
              display: block;
               a{
                display: inline-block;
                font-size: 16px;
                color: #68647d;
                font-weight: 700;
                margin-bottom: 15px;
                // padding-right: 19px;
              }
            }
           
          }
        }
      }
    }
  }
}
.intro-video-section{
  background: url(../img/promo-bg.jpg);
  background-position: top center;
  position: relative;
  height: 757px;
  .video-play-btn{
      position: absolute;
      // calc()函数指定宽度值为两个或更多数值相加的结果
      // 左50% 然后在left: -61px
      left: calc(50% - 61px);
      top: calc(50% - 61px);
      width: 122px;
      height: 122px;
      text-align: center;
      padding-top: 35px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.16);
  }
  .video-text{
      margin-bottom: 80px;
      padding: 27px 0;
      padding-left: 25px;
      position: relative;
    h2{
      font-size: 48px;
      text-transform: uppercase;
      font-style: italic;
      font-weight: 700;
      color: #fff;
      margin-bottom: 1px;
    }
    p{
      font-size: 18px;
      color: #a3a1b3;
      font-weight: 500;
      margin-bottom: 0;
    }
  }
  .video-text:after{
    content: '';
    position: absolute;
    width: 9px;
    height: 100%;
    background-color: #fff;
    top: 0;
    left: -22px;
    border-left: 3px solid #de46d6;
  }
}
.featured-section{
  position: relative;
  overflow: hidden;
  .featured-bg{
    left: 0;
    right: 0;
    position: absolute;
    float: left;
    // width: calc(50% - 156px);
    width: 35%;
    height: 100%;
    background: url(../img/featured-bg.jpg) no-repeat;
    background-position: top center;
    background-size: cover;
  }
  .featured-box{
    float: right;
    width: 65%;
    padding: 100px 50px 130px 79px;
    background: #fff;
    .top-meta{
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 20px;
      a{
        color: #b01ba5;
      }
      
    }
    h3{
      margin-bottom: 40px;
      max-width: 100%;
      font-size: 60px;
      color: #111;
      font-weight: 600;
      line-height: 1.2;
    }
    p{
      font-size: 16px;
      line-height: 1.6;
      font-weight: 500;
      color: #68647d;
      margin-bottom: 35px;
    }
    .read-more{
      font-size: 15px;
      text-transform: uppercase;
      font-weight: 700;
      font-style: italic;
      color: #251e2f;
      img{
        margin-left: 13px;
      }
    }
  }
}
.newsletter-section{
  padding: 108px 0 95px;
  text-align: center;
  // 渐变色
  background: linear-gradient(to right, #3e0f3d 0%, #1c0f3b 100%);
  h2{
    font-size: 48px;
    color: #fff;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 73px;
  }
  .newsletter-form{
    padding-left: 56px;
    input{
      font-size: 14px;
      font-weight: 700;
      font-style: italic;
      color: #fff;
      width: 76%;
      border: none;
      border-bottom: 2px solid #9b91a6;
      background: none;
      height: 63px;
      margin-right: 26px;
      margin-bottom: 40px;
    }
    input::placeholder{
      font-size: 14px;
      font-weight: 700;
      font-style: italic;
      color: #fff;
    }
    .site-btn{
      width: 180px;
      height: 60px;
      font-style: italic;
      color: #081624;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      background-color: #fff;
      text-transform: uppercase;
      line-height: 60px;
      box-shadow: 9px 9px 0px 0px #a82cb3;
    
    }
  }
}
.footer-section{
  background: linear-gradient(to right, #330d38 0%, #190d36 100%);
  text-align: center;
  .container{
  position: relative;
  padding: 60px 15px 25px;
    .footer-left-pic{
      position: absolute;
      left: -13px;
      bottom: 19px;
    }
    .footer-right-pic{
      position: absolute;
      right: 50px;
      bottom: 19px;
    }
    .footer-menu{
      padding-top: 62px;
      li{
        display: inline-block;
        a{
          display: block;
          font-size: 16px;
          font-weight: 500;
          color: #fff;
          margin-right: 40px;
          padding-bottom: 28px;
          position: relative;
          padding-right: 20px;
        }
        a::after{
          position: absolute;
          content: '';
          width: 20px;
          height: 20px;
          right: 0;
          top: 2px;
          background: url(../img/icons/arrow-down.png) no-repeat;
          background-position: right center;
        }
      }
      // 底部最后一个元素右外边距设为0 不然不居中
      li:last-child a{
        margin-right: 0;
      }
      
    }
    .footer-social{
      padding-top: 20px;
      padding-bottom: 40px;
      a{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: #fff;
        font-size: 12px;
        margin-left: 13px;
      
      }
    }
    .copyright {
      font-size: 12px;
      font-weight: 500;
      color: #9190a5;
      opacity: 0.20;
      a{
        color: #9190a5;
      }
    
    }
  }
}


// -------------------game-detail.html--------------------------
.page-top-section{
  background: url(../img/page-top-bg/1.jpg);
  height: 325px;
  // padding-top: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  .header-social{
    p{
      font-size: 22px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
      margin-bottom: 70px;
    }
    a{
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      color: #fff;
      font-size: 12px;
      margin: 0 7px;
      transition: .3s;
    }
    a:hover{
      background-color: #b01ba5;
    }
    
  }
  .page-info {
    max-width: 1496px;
    margin: 0 auto;
    font-size: 16px;
    color: #fff;
    padding-left: 60px;
    h2{
      color: #fff;
      font-size: 48px;
    }
    .site-breadcrumb{
      font-style: italic;
      margin: 0 10px;
      font-weight: 700;
      span{
        color: #c313b7;
        margin: 0 10px;
      }
      a{
        color: #fff;
        margin-right: 10px;
      }
    }
  }
}
.games-single-page{
  padding: 104px 0;
  background: linear-gradient(45deg, #501755 0%, #2d1854 100%);
  .container{
    .game-single-preview{
      margin-bottom: 108px;
    }
    .gs-meta{
      font-size: 18px;
      color: #68647d;
      font-weight: 500;
      margin-bottom: 20px;
      a{
        color: #b01ba5;
      }
    }
    h2{
      font-size: 60px;
      color: #fff;
      margin-bottom: 40px;
    }
    h4{
      color: #b01ba5;
      margin-bottom: 20px;
    }
    p{
      font-size: 16px;
      font-weight: 500;
      color: #68647d;
      line-height: 1.8;
      margin-bottom: 70px;
    }
    .game-social-share {
      p{
        font-size: 16px;
        padding-top: 4px;
        color: #68647D;
        
      }
      a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: #fff;
        font-size: 12px;
        margin-left: 13px;
      }
    }
    .widget-item{
      margin-bottom: 55px;
      .rating-widget{
        background: #34164b;
        padding: 55px 0 30px;
        h4{
          color: #fff;
          text-transform: uppercase;
          font-weight: 700;
          font-style: italic;
          padding-left: 38px;
          margin-bottom: 48px;
        }
        ul{
          list-style: none;
          padding: 0 38px;
          margin-bottom: 30px;
          li{
            display: block;
            font-size: 16px;
            color: #b01ba5;
            font-weight: 500;
            margin-bottom: 10px;
          }
        }
        .rating{
          h5{
            text-align: right;
            font-size: 36px;
            color: #fff;
            font-weight: 900;
            padding-right: 38px;
            i{
              font-weight: 500;
              font-size: 16px;
              font-style: italic;
              color: #65607b;
              text-transform: uppercase;
              margin-right: 18px;
            }
            span{
              color: #b01ba5;
            }
          }
        }
      }
      .testimonials-widget{
        background: #34164b;
        padding: 55px 0 50px;
        h4{
          color: #fff;
          text-transform: uppercase;
          font-weight: 700;
          font-style: italic;
          padding-left: 38px;
          margin-bottom: 48px;
        }
        .testim-text{
          // 上下边距0 左右30px
          padding: 0 30px;
          p{
            font-size: 16px;
            font-weight: 500;
            color: #68647d;
            line-height: 1.8;
            margin-bottom: 40px;
          }
          h6{
            color: #68647d;
            padding-left: 15px;
            span{
              color: #b01ba5;
            }
          }
        }
      }
    }

  }
}
.game-author-section{
    background: #3a1854;
    padding: 51px 0;
    overflow: hidden;
  .container{
    .game-author-pic img{
      width: 117px;
      height: 117px;
      border-radius: 50%;
      float: left;
      margin-right: 55px;
    }
    .game-author-info{
      h4{
        font-size: 24px;
        color: #fff;
        margin-bottom: 20px;
      }
      p{
        font-size: 16px;
        font-weight: 500;
        color: #68647d;
        line-height: 1.8;
      }
    }
  }
}

// -------------------reviews.html----------------------------
.page-top-section1{
  background: url(../img/page-top-bg/2.jpg);
  height: 325px;
  // padding-top: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
.reviews-section{
  padding: 104px 0;
  background: linear-gradient(45deg, #501755 0%, #2d1854 100%);
  .container{
    .reviews-filter{
      margin-bottom: 82px;
        li{
          display: inline-block;
          display: inline-block;
          width: 40px;
          height: 34px;
          background: #503c6e;
          border-radius: 17px;
          a{
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            // display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            padding-top: 7px;
          }
       
      }
    }
    .reviews-item{
      margin-bottom: 87px;
      .review-pic{
        max-width: 100%;
        img{
         
        }
      }
      .reviews-content{
        position: relative;
        left: 0;
        .rating{
          position: absolute;
          top: 0;
          right: 0;
          h5{
            text-align: right;
            font-size: 36px;
            color: #fff;
            font-weight: 900;
            padding-right: 38px;
            // rating
            i{
              font-weight: 500;
              font-size: 16px;
              font-style: italic;
              color: #65607b;
              text-transform: uppercase;
              margin-right: 18px;
            }
            span{
              color: #c313b7;
            }
          }
        }
        .top-meta{
          font-size: 18px;
          font-weight: 500;
          margin-bottom: 20px;
          color: #fff;
          a{
            color: #b01ba5;
          }
        }
        p{
          font-size: 15px;
          font-weight: 500;
          color: #68647d;
          margin-bottom: 35px;
        }
        h3{
          margin-bottom: 35px;
          max-width: 100%;
          font-size: 30px;
          color: #fff;
          font-weight: 500;
          // 文字所占容器高度 可调节成文字高度=容器高度
          line-height: 1.5;
        }
        a{
            font-size: 15px;
            text-transform: uppercase;
            font-weight: 700;
            font-style: italic;
            color: #fff;
          img{
            margin-left: 13px;
          }
        }
      }
    }
    .site-pagination{
      // display: flex;
      a{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 16px;
        font-weight: 500;
        border: 2px solid transparent;
        color: #fff;
        text-align: center;
        line-height: 44px;
        margin-left: 5px;
      }
      .active{
        color: #b01ba5;
        border: 2px solid #b01ba5;
      }
      a.active:first-child{
        margin-left: 0;
      }
    }
  }
}
// -------------------games.html----------------------------
.page-top-section2{
  background: url(../img/page-top-bg/3.jpg);
  height: 325px;
  // padding-top: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
.games-list{
  padding: 108px 0;
  background: linear-gradient(45deg, #501755 0%, #2d1854 100%);
  .container{
    .reviews-filter{
      margin-bottom: 82px;
        li{
          display: inline-block;
          display: inline-block;
          width: 40px;
          height: 34px;
          background: #503c6e;
          border-radius: 17px;
          a{
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            // display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            padding-top: 7px;
          }
       
      }
    }
    .game-item{
      margin-bottom: 80px;
      h5{
        font-size: 20px;
        color: #fff;
        padding-top: 30px;
        margin-bottom: 20px;
      }
      a{
        font-size: 15px;
        text-transform: uppercase;
        font-weight: 700;
        font-style: italic;
        color: #b01ba5;
        img{
          margin-left: 13px;
        }
      }
    }
    .site-pagination{
      // display: flex;
      a{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 16px;
        font-weight: 500;
        border: 2px solid transparent;
        color: #fff;
        text-align: center;
        line-height: 44px;
        margin-left: 5px;
      }
      .active{
        color: #b01ba5;
        border: 2px solid #b01ba5;
      }
      a.active:first-child{
        margin-left: 0;
      }
    }
    .sidebar{
      // padding-top: 60px;
      .widget-item{
        margin-bottom: 55px;
        .categories-widget{
          background: #34164b;
          padding: 55px 0 25px;
          h4{
            color: #fff;
            text-transform: uppercase;
            font-weight: 700;
            font-style: italic;
            padding-left: 38px;
            margin-bottom: 48px;
          }
          ul{
            list-style: none;
            padding: 0 38px;
            li{
              display: block;
              a{
                display: inline-block;
                font-size: 16px;
                color: #68647d;
                font-weight: 500;
                margin-bottom: 15px;
              }
            }
          }
        }
      }
    }
  }
}
.featured-section{
  .featured-bg1{
    background: url(../img/review/4.jpg) no-repeat;
    background-position: top center;
    background-size: cover;
  }
}
// ------------------contact.html----------------------------
.page-top-section3{
  background: url(../img/page-top-bg/4.jpg);
  height: 325px;
  // padding-top: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
.contact-page{
  padding: 104px 0;
  background: linear-gradient(45deg, #501755 0%, #2d1854 100%);
  .map iframe{
    width: 100%;
    height: 600px;
    margin-bottom: 104px;
  }
  .contact-form{
    input,textarea{
      width: 100%;
      border: none;
      background-color: transparent;
      border-bottom: 2px solid rgba(255, 255, 255, 0.54);
      // 文字和下边框
      padding-bottom: 20px;
      // 两个input框之间
      margin-bottom: 30px;
      font-weight: 500;
      font-size: 16px;
      font-style: italic;
      color: #fff;
      line-height: 1;
    }
    input::placeholder{
      font-weight: 500;
      text-transform: uppercase;
      font-size: 17px;
      font-style: italic;
      color: #fff;
    }
    textarea::placeholder{
      font-weight: 500;
      font-size: 17px;
      text-transform: uppercase;
      font-style: italic;
      color: #fff;
    }
    textarea{
      margin-bottom: 48px;
      padding-bottom: 115px;
    }
    .site-btn{
      border: none;
      font-size: 14px;
      font-weight: 700;
      font-style: italic;
      min-width: 186px;
      padding: 24px 30px;
      border-radius: 0;
      text-transform: uppercase;
      color: #081624;
      text-align: center;
      box-shadow: 9px 9px #b01ba5;
    }
  }
  .contact-text{
    h3{
      margin-bottom: 25px;
      color: #fff;
      font-size: 30px;
      font-weight: 600;
      line-height: 1.2;
    }
    p{
      line-height: 1.9;
      color: #68647d;
      margin-bottom: 50px;
    }
    .cont-info{
      overflow: hidden;
      margin-bottom: 20px;
      .ci-icon{
        float: left;
        width: 32px;
        margin-right: 26px;
      }
      .ci-text{
        overflow: hidden;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        line-height: 1.5;
      }
    }
  }
}
@media screen and (max-width: 1199px){
  .blog-section .blog-item .blog-img {
      width: 250px;
  }
}

@media screen and (min-width: 1200px){
  .container {
    max-width: 1175px;
  }
}